<template>
<h1>回收站</h1>
  <!--  客户信息表-->
  <el-table :data="tableData.customerArr" style="width: 100%">

    <el-table-column label="删除时间" width="160" >
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.deleteDate }}</div>
          </template>
          <template #reference>
            <el-tag class="large-font">{{ scope.row.deleteDate }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="ID" width="80" >
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.customerId }}</div>
          </template>
          <template #reference>
            <el-tag class="large-font">{{ scope.row.customerId }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="姓名" width="90">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.customerName }}</div>
          </template>
          <template #reference>
            <el-tag class="large-font">{{ scope.row.customerName }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="性别" width="60">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{scope.row.customerSex}}</div>
          </template>
          <template #reference>
            <el-tag class="large-font">{{ scope.row.customerSex===1?"男":"女" }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="年龄" width="60">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.customerAge }}</div>
          </template>
          <template #reference>
            <el-tag class="large-font">{{ scope.row.customerAge }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="身份证号码" width="200" >
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.customerCard }}</div>
          </template>
          <template #reference>
            <el-tag class="large-font" >{{ scope.row.customerCard }}</el-tag>
          </template>
        </el-popover>
      </template>

    </el-table-column>

    <el-table-column label="电话号码" width="140">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.customerPhone }}</div>
          </template>
          <template #reference>
            <el-tag class="large-font">{{ scope.row.customerPhone }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="居住地址" width="190">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.customerAddress }}</div>
          </template>
          <template #reference>
            <el-tag class="large-font">{{ scope.row.customerAddress }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope" >
<!--        <el-button-->
<!--            size="small"-->
<!--            type="warning"-->
<!--            @click="handleBack(scope.row.customerId)"-->
<!--        >-->
<!--          恢复-->
<!--        </el-button>-->
        <el-popconfirm @confirm="handleBack(scope.row)" title="确定恢复数据?">
          <template #reference>
            <el-button
                size="small"
                type="warning"
            >恢复</el-button>
          </template>
        </el-popconfirm>
        <el-popconfirm @confirm="handleDelete(scope.row.id)" title="确定彻底删除数据?">
          <template #reference>
            <el-button
                size="small"
                type="danger"
            >彻底删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>

  </el-table>
</template>

<script setup>

import {reactive} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
const tableData = reactive({
  customerArr: [
    {
      deleteDate:"2024-07-01 24:23:59",customerId: "1", customerName: "张三", customerSex: "1", customerAge: "18",
      customerCard: "500381xxxxxxxx4175", customerPhone: "177xxxxxxxx", customerAddress: "重庆市南岸区",
    },
  ],//存放被删除客户信息数组

})

function loadDeletedCustomer(){
  axios({
    method:"get",
    url:"http://localhost:8080/boot/customer/getDeletedCustomer"
  }).then((result)=>{
    tableData.customerArr = result.data
  })
}
loadDeletedCustomer()
//恢复数据
function handleBack(customer){
  console.log("恢复了")
  console.log(customer.customerArr)
  console.log(customer.customerId)
  axios({
    method:"get",
    url:"http://localhost:8080/boot/customer/backCustomer",
    params: {
      customerId:customer.customerId,
    }
  }).then((result)=>{
    if(result.data){
      ElMessage.success("恢复成功")
    }else {
      ElMessage.error("恢复失败")
    }
    loadDeletedCustomer()
  })
}
//删除
function handleDelete(id){
  console.log(id)
  axios({
    method:"get",
    url:"http://localhost:8080/boot/customer/deleteCustomer",
    params: {
      id:id,
    }
  }).then((result)=>{
    if(result.data){
      ElMessage.success("删除成功")
    }else {
      ElMessage.error("删除失败")
    }
    loadDeletedCustomer()
  })
}
</script>

<style scoped>

</style>